<template>
	<view class="classlist" v-if="wallList">
		<view class="loadingLayout" v-if="!wallList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="item in wallList"
				:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="wallList.length || noData">
			<uni-load-more :status="noData ? 'noMore' : 'loading'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onUnload,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		apiGetWallList,
		apiGetUserWallList
	} from "@/api/apis.js";
	import {
		ref
	} from "vue";
	const queryParams = {
		pageNum: 1,
		pageSize: 12,
	};
	const wallList = ref([]);
	const noData = ref(false);
	onLoad((e) => {
		let {
			id = null, name = null, type = null
		} = e;
		if (type) queryParams.type = type;
		if (id) queryParams.classid = id;

		uni.setNavigationBarTitle({
			title: name,
		});
		getWallList();
	});
	onUnload(() => {
		uni.removeStorageSync("wallListCache");
	});
	onReachBottom(() => {
		if (noData.value) return;
		queryParams.pageNum++;
		getWallList();
	});
	const getWallList = async () => {
		let res;
		if (queryParams.classid) res = await apiGetWallList(queryParams);
		if (queryParams.type) res = await apiGetUserWallList(queryParams);
		wallList.value = [...wallList.value, ...res.data];
		if (res.data.length < queryParams.pageSize) noData.value = true;
		uni.setStorageSync("wallListCache", wallList.value);
	};
</script>

<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>